<template>
  <q-card class="col-8">
    <q-card-section class="row">
      <div class="fal col-3">Work Order(WO) NO. :</div>
      <q-input
        class="input-css q-my-sm col-8"
        v-model="form.form1.work_order_no"
        :dense="true"
        hide-bottom-space
        readonly
        stack-label
        :rules="[
          (val) =>
            (val.length == 10 && Number.isInteger(parseInt(val))) ||
            'Work Order should be 10 numbers',
        ]"
      />
    </q-card-section>

    <q-separator inset />

    <q-card-section class="col-8">
      <div class="row">

        <div class="fal col-2">
          Reported Date<span style="color: red">*</span>:
        </div>
        <div class="col-4 q-pa-sm">
          <div style="max-width: 300px">
            <q-input
              class="input-css q-my-sm"
              readonly
              v-model="form.form1.report_date"
              dense
              hide-bottom-space
            >
              <template v-slot:append>
                <q-icon
                  name="event"
                  class="cursor-pointer"
                  @click="datePopup = true"
                >
                </q-icon>
              </template>
            </q-input>
          </div>
        </div>
        <q-dialog  v-model="datePopup">
          <div class="q-pa-md">
            <div class="q-gutter-md row items-start">
              <q-date
                readonly
                mask="YYYY-MM-DD"
                v-model="form.form1.report_date"
                minimal
                @update:model-value="datePopup = false"
              />
            </div>
          </div>
        </q-dialog>

        <div class="fal col-2">
          M' tce Type<span style="color: red">*</span>:
        </div>
        <div class="fal ">
          <q-input
            v-model="form.form1.mtce_type"
            lazy-rules
            class="col-4 input-css q-my-sm"
            readonly
            hide-bottom-space
            dense
          />
        </div>
      </div>

      <div class="row">
        <div class="fal col-4">
          Department/Section :<span style="color: red">*</span>
        </div>

        <q-input
          v-model="form.form1.department"
          hide-bottom-space
          stack-label
          :rules="[(val) => val.length > 0 || 'Require field']"
          lazy-rules
          class="col-8 input-css q-my-sm"
          readonly
          :dense="true"
        />
      </div>

      <div class="row">
        <div class="fal col-4">
          Parent/Rel. Wo No. :<span style="color: red">*</span>
        </div>

        <q-input
          v-model="form.form1.parent_work_order_no"
          hide-bottom-space
          lazy-rules
          readonly
          class="col-8 input-css q-my-sm readonly"
          :dense="true"
        />
      </div>

      <div class="row">
        <div class="fal col-2">
          I/O Counter:<span style="color: red">*</span>
        </div>
        <q-input
          class="col-4 input-css q-my-sm"
          v-model="form.form1.io_counter"
          readonly
          :dense="true"
        />
      </div>

      <div class="row">
        <div class="fal col-4">
          Eqpt. Description:<span style="color: red">*</span>
        </div>
        <q-input
          class="col-8 input-css q-my-sm"
          hide-bottom-space
          readonly
          v-model="form.form1.eqpt_description"
          stack-label
          :rules="[(val) => val.length > 0 || 'Require field']"
          :dense="true"
        />
      </div>

      <div class="row">
        <div class="fal col-4">
          Failure Symptom:<span style="color: red">*</span>
        </div>
        <q-input
          class="col-8 input-css q-my-sm readonly"
          type="textarea"
          hide-bottom-space
          stack-label
          :rules="[(val) => val.length > 0 || 'Require field']"
          v-model="form.form1.failure_symptom"
          readonly
          :dense="true"
        />
      </div>

      <div class="row">
        <div class="fal col-4">Remark:</div>
        <q-input
          class="col-8 input-css q-my-sm readonly"
          v-model="form.form1.remark"
          readonly
          :dense="true"
        />
      </div>
    </q-card-section>
  </q-card>
</template>

<script setup lang="ts">
import { reactive, ref } from 'vue';
import { useCheckinStore } from 'src/stores/checkinStore';
import { RepairOrder } from 'src/services/type';

const datePopup = ref(false);

const props = defineProps<{
  orderDetail: RepairOrder;
}>();

const form = reactive<{
  form1: {
    cews_order: string;
    serial_no: string;
    work_order_no: string;
    car: string;
    mtce_type: string;
    report_date: string;
    location: string;
    department: string;
    failure_symptom: string;
    eqpt_description: string;
    remark: string;
    status: string;
    io_counter: string;
    check_in: string;
    parent_work_order_no: string;
  };
}>({
  form1: {
    cews_order: '',
    serial_no: '',
    work_order_no: '',
    car: '',
    mtce_type: '',
    report_date: '',
    location: '',
    department: '',
    failure_symptom: '',
    eqpt_description: '',
    remark: '',
    status: '',
    io_counter: '',
    check_in: '',
    parent_work_order_no: '',
  },
});
if (props.orderDetail) {
  form.form1 = { ...props.orderDetail };
}
</script>

<style scoped>
.now-parent {
  border-top: 1px solid #000;
  padding: 0;
}
.now-child {
  padding: 0.5rem;
  border-bottom: 1px solid #000;
  border-right: 1px solid #000;
  border-left: 1px solid #000;
  background-color: #d9d9d9;
}
.c-status-field {
  font-size: 20px;
  font-weight: 700;
  width: auto;
}
</style>
